<script setup lang='ts'>

</script>
 

<template>
	<view class="box" hover-class="boxHover">
		<view class="inner" hover-class="innerHover" :hover-stop-propagation="true">
			内部元素
		</view>
	</view>
	<view>-----------</view>
	
	<scroll-view scroll-x="true" class="scrollView">
		<view class="box">scroll子元素</view>
		<view class="box">scroll子元素</view>
		<view class="box">scroll子元素</view>
		<view class="box">scroll子元素</view>
		<view class="box">scroll子元素</view>
		<view class="box">scroll子元素</view>
		<view class="box">scroll子元素</view>
		<view class="box">scroll子元素</view>
		<view class="box">scroll子元素</view>
		<view class="box">scroll子元素</view>
		<view class="box">scroll子元素</view>
		<view class="box">scroll子元素</view>
		<view class="box">scroll子元素</view>
		<view class="box">scroll子元素</view>
		<view class="box">scroll子元素</view>
	</scroll-view>
	
	<navigator url="/pages/demo1/demo1" open-type="reLaunch">去demo1</navigator>
	<navigator url="/pages/demo2/demo2" open-type="reLaunch">去demo2</navigator>
</template>


<style scoped lang='scss'>
	.scrollView{
		width: 80%;
		height: 220px;
		border: 1px solid red;
		white-space: nowrap;
		.box{
			display: inline-block;
			width: 150px;
			height: 100px;
			margin: 5px;
			background-color: green;
		}
	}
	
	navigator{
		width: 80px;
		background: red;
	}
</style>
